<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>供应链总览数据展示</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Segoe UI', 'Microsoft YaHei', sans-serif;
        }

        body {
            background: linear-gradient(135deg, #0f1c3c 0%, #1a2d5a 100%);
            color: #e0e0e0;
            min-height: 100vh;
            padding: 20px;
        }

        .dashboard-header {
            text-align: center;
            margin-bottom: 30px;
        }

        .dashboard-header h1 {
            color: #4fc3f7;
            font-size: 2.5rem;
            margin-bottom: 10px;
            text-shadow: 0 0 10px rgba(79, 195, 247, 0.5);
        }

        .dashboard-header p {
            color: #81d4fa;
            font-size: 1.2rem;
        }

        .stats-container {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 25px;
            max-width: 1400px;
            margin: 0 auto;
        }

        .stat-card {
            background: rgba(22, 40, 75, 0.7);
            border-radius: 15px;
            padding: 25px;
            box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
            border: 1px solid #2a4a7c;
            transition: all 0.3s ease;
            position: relative;
            overflow: hidden;
        }

        .stat-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 4px;
            background: linear-gradient(90deg, #4fc3f7, #1976d2);
        }

        .stat-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 12px 30px rgba(0, 0, 0, 0.4);
            border-color: #4fc3f7;
        }

        .card-header {
            display: flex;
            align-items: center;
            margin-bottom: 20px;
        }

        .card-icon {
            width: 50px;
            height: 50px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-right: 15px;
            font-size: 1.5rem;
            background: rgba(79, 195, 247, 0.1);
            color: #4fc3f7;
        }

        .card-title {
            font-size: 1.3rem;
            color: #81d4fa;
            font-weight: 600;
        }

        .main-value {
            font-size: 2.2rem;
            font-weight: 700;
            color: #4fc3f7;
            margin-bottom: 5px;
            text-shadow: 0 0 8px rgba(79, 195, 247, 0.3);
        }

        .value-unit {
            font-size: 1rem;
            color: #bbdefb;
            margin-left: 5px;
        }

        .card-description {
            color: #bbdefb;
            font-size: 0.95rem;
            margin-top: 10px;
            line-height: 1.5;
        }

        .detail-list {
            margin-top: 15px;
            list-style: none;
        }

        .detail-list li {
            padding: 8px 0;
            border-bottom: 1px solid rgba(42, 74, 124, 0.5);
            display: flex;
            justify-content: space-between;
        }

        .detail-list li:last-child {
            border-bottom: none;
        }

        .detail-label {
            color: #bbdefb;
        }

        .detail-value {
            color: #e0e0e0;
            font-weight: 600;
        }

        .trend-indicator {
            display: inline-flex;
            align-items: center;
            font-size: 0.9rem;
            padding: 3px 8px;
            border-radius: 12px;
            margin-left: 10px;
        }

        .trend-up {
            background: rgba(76, 175, 80, 0.2);
            color: #4caf50;
        }

        .trend-down {
            background: rgba(244, 67, 54, 0.2);
            color: #f44336;
        }

        .progress-bar {
            height: 6px;
            background: rgba(42, 74, 124, 0.5);
            border-radius: 3px;
            margin-top: 10px;
            overflow: hidden;
        }

        .progress-fill {
            height: 100%;
            border-radius: 3px;
            background: linear-gradient(90deg, #4fc3f7, #1976d2);
        }

        .card-footer {
            margin-top: 15px;
            font-size: 0.85rem;
            color: #81d4fa;
            text-align: right;
        }

        @media (max-width: 768px) {
            .stats-container {
                grid-template-columns: 1fr;
            }

            .main-value {
                font-size: 1.8rem;
            }

            .card-header {
                flex-direction: column;
                text-align: center;
            }

            .card-icon {
                margin-right: 0;
                margin-bottom: 10px;
            }
        }
    </style>
</head>
<body>
<div class="dashboard-header">
    <h1>供应链总览</h1>
    <p>关键数据指标实时监控</p>
</div>

<div class="stats-container">
    <!-- 年度计划金额卡片 -->
    <div class="stat-card">
        <div class="card-header">
            <div class="card-icon">
                <i class="fas fa-chart-line"></i>
            </div>
            <div class="card-title">2025年度计划金额</div>
        </div>
        <div class="main-value">4209.23<span class="value-unit">亿元</span></div>
        <div class="card-description">全年采购计划总额，较去年增长<span class="trend-indicator trend-up">+8.5%</span></div>
        <div class="progress-bar">
            <div class="progress-fill" style="width: 85%"></div>
        </div>
        <div class="card-footer">计划完成率 85%</div>
    </div>

    <!-- 年度采购金额卡片 -->
    <div class="stat-card">
        <div class="card-header">
            <div class="card-icon">
                <i class="fas fa-shopping-cart"></i>
            </div>
            <div class="card-title">2025年度采购金额</div>
        </div>
        <div class="main-value">1320.59<span class="value-unit">亿元</span></div>
        <div class="card-description">已完成采购总额，占年度计划<span class="trend-indicator trend-up">31.4%</span></div>
        <div class="progress-bar">
            <div class="progress-fill" style="width: 31%"></div>
        </div>
        <div class="card-footer">同比增长 12.3%</div>
    </div>

    <!-- 当前库存金额卡片 -->
    <div class="stat-card">
        <div class="card-header">
            <div class="card-icon">
                <i class="fas fa-boxes"></i>
            </div>
            <div class="card-title">当前库存金额</div>
        </div>
        <div class="main-value">17.41<span class="value-unit">亿元</span></div>
        <div class="card-description">库存总价值，较上月下降<span class="trend-indicator trend-down">-2.1%</span></div>
        <div class="progress-bar">
            <div class="progress-fill" style="width: 65%"></div>
        </div>
        <div class="card-footer">库存周转率 5.8次/月</div>
    </div>

    <!-- 专家数据卡片 -->
    <div class="stat-card">
        <div class="card-header">
            <div class="card-icon">
                <i class="fas fa-user-tie"></i>
            </div>
            <div class="card-title">专家数据</div>
        </div>
        <div class="main-value">17,783<span class="value-unit">人</span></div>
        <div class="card-description">专家库总人数，涵盖各领域专业人才</div>
        <ul class="detail-list">
            <li>
                <span class="detail-label">内部专家</span>
                <span class="detail-value">14,943人</span>
            </li>
            <li>
                <span class="detail-label">外部专家</span>
                <span class="detail-value">2,840人</span>
            </li>
            <li>
                <span class="detail-label">屏蔽专家</span>
                <span class="detail-value">2,779人</span>
            </li>
        </ul>
        <div class="card-footer">活跃专家占比 84.4%</div>
    </div>

    <!-- 供应商数据卡片 -->
    <div class="stat-card">
        <div class="card-header">
            <div class="card-icon">
                <i class="fas fa-handshake"></i>
            </div>
            <div class="card-title">供应商数据</div>
        </div>
        <div class="main-value">234,225<span class="value-unit">家</span></div>
        <div class="card-description">供应商总数，涵盖各类物资和服务</div>
        <ul class="detail-list">
            <li>
                <span class="detail-label">正式供应商</span>
                <span class="detail-value">111,235家</span>
            </li>
            <li>
                <span class="detail-label">潜在供应商</span>
                <span class="detail-value">122,990家</span>
            </li>
            <li>
                <span class="detail-label">待审批供应商</span>
                <span class="detail-value">0家</span>
            </li>
        </ul>
        <div class="card-footer">优质供应商占比 47.5%</div>
    </div>

    <!-- 数据概览卡片 -->
    <div class="stat-card">
        <div class="card-header">
            <div class="card-icon">
                <i class="fas fa-chart-pie"></i>
            </div>
            <div class="card-title">数据概览</div>
        </div>
        <div class="main-value">6<span class="value-unit">大指标</span></div>
        <div class="card-description">核心供应链数据实时监控与分析</div>
        <ul class="detail-list">
            <li>
                <span class="detail-label">计划执行率</span>
                <span class="detail-value">85.0%</span>
            </li>
            <li>
                <span class="detail-label">采购完成率</span>
                <span class="detail-value">31.4%</span>
            </li>
            <li>
                <span class="detail-label">库存周转率</span>
                <span class="detail-value">5.8次/月</span>
            </li>
            <li>
                <span class="detail-label">专家利用率</span>
                <span class="detail-value">67.2%</span>
            </li>
        </ul>
        <div class="card-footer">数据更新时间: 2025-10-19 14:30</div>
    </div>
</div>

<script>
    // 添加简单的数字动画效果
    document.addEventListener('DOMContentLoaded', function() {
        const valueElements = document.querySelectorAll('.main-value');

        valueElements.forEach(element => {
            const originalText = element.textContent;
            const numbers = originalText.match(/\d+\.?\d*/g);

            if (numbers) {
                numbers.forEach(number => {
                    const formattedNumber = parseFloat(number).toLocaleString();
                    element.innerHTML = element.innerHTML.replace(number, `<span class="animated-number">${formattedNumber}</span>`);
                });
            }
        });

        // 添加卡片进入动画
        const cards = document.querySelectorAll('.stat-card');
        cards.forEach((card, index) => {
            card.style.opacity = '0';
            card.style.transform = 'translateY(20px)';

            setTimeout(() => {
                card.style.transition = 'opacity 0.5s ease, transform 0.5s ease';
                card.style.opacity = '1';
                card.style.transform = 'translateY(0)';
            }, index * 100);
        });
    });
</script>
</body>
</html>